<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Choisis ton camp - Refuge</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/stylish-portfolio.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
	
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&language=fr">
	</script>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&language=fr">
	</script>

</head>
<?php

require_once("EnteteCourt.php");

?>

    
    <body id="top" class="header">
        <div class="text-vertical-center">
        
        
        <form >
        <div class="form-group">
            <label "for="inputVille">Refuge disponible en ce moment:</label>
            <input type="text" class="form-control" id="adresse" placeholder="adresse">
        </div>
        <button type="button" value="Localiser sur Google Map" class="btn btn-primary" onclick="TrouverAdresse()";>Recherher</button>
   		 </form>
		 <br/>
		 <span id="text_latlng"></span>
		 <section/>
		<div id="map-canvas" style="height:400px;width:700px; margin-left: -12.5%; position: absolute"></div>
		</section>
		
		<script type="text/javascript">
		var geocoder;
		var map;
		// initialisation de la carte Google Map de départ
		function initialiserCarte() {
		  geocoder = new google.maps.Geocoder();
		  // Ici j'ai mis la latitude et longitude du vieux Port de Marseille pour centrer la carte de départ
		  var latlng = new google.maps.LatLng(43.295309,5.374457);
		  var mapOptions = {
			zoom      : 14,
			center    : latlng,
			mapTypeId : google.maps.MapTypeId.ROADMAP
		  }
		  // map-canvas est le conteneur HTML de la carte Google Map
		  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
		}
		 
		function TrouverAdresse() {
		  // Récupération de l'adresse tapée dans le formulaire
		  var adresse = document.getElementById('adresse').value;
		  geocoder.geocode( { 'address': adresse}, function(results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
			  map.setCenter(results[0].geometry.location);
			  // Récupération des coordonnées GPS du lieu tapé dans le formulaire
			  var strposition = results[0].geometry.location+"";
			  strposition=strposition.replace('(', '');
			  strposition=strposition.replace(')', '');
			  // Affichage des coordonnées dans le <span>
			  document.getElementById('text_latlng').innerHTML='Coordonnées : '+strposition;
			  // Création du marqueur du lieu (épingle)
			  var marker = new google.maps.Marker({
				  map: map,
				  position: results[0].geometry.location
			  });
			} else {
			  alert('Adresse introuvable: ' + status);
			}
		  });
		}
		// Lancement de la construction de la carte google map
		google.maps.event.addDomListener(window, 'load', initialiserCarte);
		</script>
          

        </div>
		
		
		
    </body>